<template>
  <div class="goods_con">
    <el-form class="search" label-position="right" label-width="6rem">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="品牌名称：">
            <el-input v-model="brandParams.name" />
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb15">
          <SearchButton :default-params="brandParams" @refreshParams="refreshParams" @getList="getList1" />
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      ref="listTree"
      border
      resizable
      highlight-hover-row
      :auto-resize="true"
      :data="brandList"
      width
      max-height="300"
      row-id="openId"
      highlight-current-row
      text-algin="center"
      :checkbox-config="{checkRowKeys: checkList, checkStrictly: false}"
      @checkbox-all="selectAll"
      @checkbox-change="selectChangeEvent"
    >
      <vxe-table-column type="checkbox" width="50" align="center" />
      <vxe-table-column field="name" title="品牌名称" />
    </vxe-table>
    <vxe-pager
      :current-page.sync="brandParams.pageNum"
      :page-size.sync="brandParams.pageSize"
      :total="brandTotal"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
      @page-change="getList"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelClick">取消</el-button>
      <el-button  type="primary" @click="clickSure">确定</el-button>
    </div>
  </div>

</template>

<script>
import SearchButton from '@/components/SearchButton'
import { getBrandList } from '@/api/brand'
export default {
  components: {
    SearchButton
  },
  props: {
    checkLists: {
      type: Array,
      default: []
    },
    arrLists: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      brandParams:{
        pageNum: 1,
        pageSize: 20
      },
      brandTotal:0,
      brandList:[],
      checkList: [],
      arrList:[]
    }
  },
  mounted() {
    this.checkList = this.checkLists
    this.arrList = this.arrLists
    this.getList()
  },
  methods: {
    refreshParams(params) {
      this.brandParams = params
    },
    getList1() {
      this.brandParams.pageNum = 1
      this.getList()
    },
    getList() {
      getBrandList(this.brandParams).then(res => {
        this.checkList.forEach((item, index) => {
          res.records.forEach((it, idx) => {
            if (item === it.id) {
              this.$refs.listTree.setCheckboxRow(res.records[idx], true)
            }
          })
        })
        this.brandList = res.records
        this.brandTotal = res.total
      })
    },
    // 全部选中
    selectAll(e) {
      if (e.checked) {
        this.checkList.push(...e.records.map(item => item.id))
        this.checkList = Array.from(new Set(this.checkList))
        this.arrList.push(...e.records.map(item => {
          return {
            id: item.id,
            name: item.name,
            introduce: item.introduce
          }
        }))
        const arr2 = []
        this.checkList.forEach(item => {
          arr2.push(this.arrList.filter(it => it.id === item)[0])
        })
        this.arrList = arr2
      } else {
        const arr = this.brandList.map(item => item.id)
        const arr1 = []
        this.checkList.forEach((item, index) => {
          arr.forEach(it => {
            if (item === it) {
              arr1.push(index)
            }
          })
        })
        arr1.reverse().forEach(item => {
          this.checkList.splice(item, 1)
          this.arrList.splice(item, 1)
        })
      }
    },
    selectChangeEvent(row) {
      let i = -1
      this.checkList.forEach((item, index) => {
        if (item === row.row.id) {
          i = index
        }
      })
      if (i === -1) {
        this.checkList.push(row.row.id)
        this.arrList.push({ id: row.row.id, name: row.row.name, introduce: row.row.introduce })
        const arr2 = []
        this.checkList.forEach(item => {
          if (this.arrList.filter(it => it.id === item).length > 0) arr2.push(this.arrList.filter(it => it.id === item)[0])
        })
        this.arrList = arr2
      } else {
        this.checkList.splice(i, 1)
        this.arrList.splice(i, 1)
      }
    },
    handleCurrentChange1(val) {
      this.currentRow1 = val
    },
    clickSure(){
      if (this.checkList.length === 0) {
        this.$message.error('请选择品牌')
        return false
      }
      this.$emit('checkBox',this.checkList)
      this.$emit('arrBox',this.arrList)
      this.$emit('dialogs',false)
    },
    cancelClick(){
      this.$emit('dialogs',false)
    }
  }
}
</script>

<style lang="css" scoped>
.dialog-footer{
  text-align: right;
}
</style>
